<template>
    <div id="create-edit-container">
        <!-- use the modal component, pass in the prop -->
        <Modal v-model="stateManager.editDialogVisible"
               :title="modalTitle"
               width="60%"
               @on-cancel="closeDialog"
               :styles="{top: '20px'}"
               :mask-closable="false">

            <i-form ref="model" :model="model" :rules="ruleValidate">
                <Row type="flex">
                    <i-col span="11">
                        <Form-item label="组织名称" prop="name">
                            <i-input v-model="model.name" placeholder="请输入组织名称"></i-input>
                        </Form-item>
                    </i-col>
                    <i-col span="11" offset="2">
                        <Form-item label="组织编码" prop="code">
                            <i-input v-model="model.code" placeholder="请输入组织编码"></i-input>
                        </Form-item>
                    </i-col>
                </Row>
                <Row type="flex">
                    <i-col span="11">
                        <Form-item label="人数" prop="number">
                            <InputNumber :min="0" :step="1" style="width: 100%;" v-model="model.number" placeholder="请输入人数"></InputNumber>
                        </Form-item>
                    </i-col>
                    <i-col span="11" offset="2">
                        <Form-item label="组织电话" prop="tel">
                            <i-input v-model="model.tel" placeholder="请输入组织电话"></i-input>
                        </Form-item>
                    </i-col>
                </Row>
                <Row type="flex">
                    <i-col span="24">
                        <Form-item label="所属地区" prop="local">
                            <i-input v-model="model.local" placeholder="请输入所属地区"></i-input>
                        </Form-item>
                    </i-col>

                </Row>
            </i-form>

            <template slot="footer">
                <Row type="flex">
                    <i-col span="24">
                        <div class="pull-right">
                            <i-button type="ghost" @click="closeDialog">取消</i-button>
                            <i-button type="primary" @click="saveModel" :loading="isLoading">确定</i-button>
                        </div>
                    </i-col>
                </Row>
            </template>

        </Modal>

    </div>


</template>

<script>
  import {mapState} from 'vuex';
  import selectData from '../../libs/getDataForSelect';
  const dateFormat = require('dateformat');
  export default {
    props: {
      stateManager: {
        type: Object
      }
    },
    data: function () {
      const validateMobile = (rule, value, callback) => {
        let regex = /^1(3|4|5|7|8)[0-9]{9}$/;
        if (regex.test(value)) {
          callback();
        } else {
          callback(new Error('请输入有效的电话号码！'));
        }
      };
      return {
        model: this.$modelDataSource({
          url: '/api/organization',
          dataKey: 'model',
          attributes: {
            id: 0,
            name: '',
            code: '',
            number:0,
            tel:'',
            local:'',
          }
        }),
        isLoading: false,
        ruleValidate: {
          name: [
            {required: true, message: '组织名称不能为空', trigger: 'blur'}
          ],
          code: [
            {required: true, message: '组织编码不能为空', trigger: 'blur'}
          ],
          local: [
            {required: true, message: '所属地区不能为空', trigger: 'blur'}
          ],
          number: [
            {required: true,type:'number', message: '人数不能为空', trigger: 'blur'}
          ],
          tel: [
            {required: true, validator: validateMobile, trigger: 'blur'}
          ],

        },
      };
    },
    methods: {
      closeDialog: function () {
        this.stateManager.editDialogVisible = false;
        this.model.reset();
        this.$refs['model'].resetFields();
        this.stateManager.editModelId = 0;
      },
      saveModel: function () {
        let self = this;
        self.$refs['model'].validate((valid) => {
          if (valid) {
            console.log('表单验证通过');
            self.isLoading = true;
            self.model.save(function () {
              self.$Notice.success({
                title: '保存成功',
                desc: self.model.name
              });
              self.isLoading = false;
              self.closeDialog();
              self.stateManager.refreshList = true;
            }, function () {
                self.isLoading = false;
            });
          } else {
            console.log('表单验证失败');
          }
        });
      }
    },
    computed: {
      modalTitle: function () {
        if (this.model.id === 0) {
          return '添加调解组织';
        } else {
          return '修改调解组织';
        }
      }
    },
    watch: {
      'stateManager.editModelId': function (newValue) {
        let self = this;
        this.model.fetch(newValue, {}, function () {
          self.stateManager.buttonLoading = false;
          self.stateManager.editDialogVisible = true;
        }, function () {
          self.stateManager.buttonLoading = false;
        });
      }
    }
  }
</script>

<style>

</style>
